<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直方向对齐属性【文本与图片对齐】</title>
		<!-- 垂直方向对象属性  vertical-align
		     使用方法：1.用于表格中单元格垂直居中
			          2.用于行内元素以及行内块元素的垂直居中
					   【文本和图片垂直居中（对齐）效果】
						对齐分为四中：基线对齐，顶部对齐
						             居中对齐，底部对齐
						元素种类：块元素，行元素，行内块元素
						块元素特点：独占一行，设置宽高
					    行元素特点：可以在一行内显示，不可以设置宽高
						网页：元素之间嵌套生成
						行元素与开元素可以任意嵌套
						前提：设置宽高---行套块  √
						             ---块套块  √
						前提：一行内显示---行套块 √
									  ---块套块  ×
									  ---块套行  
									  ---行套行 √
						-->
	</head>
	<style>
		im g:nth-child(1){
			/*vertical-align: baseline; 默认基线对齐*/
			vertical-align: baseline ;
		}
		/* 问题：派生选择器，特点：找后代 p img */
		i mg:nth-child(2){
			/*vertical-align: baseline; 顶部对齐*/
			vertical-align: top ;
			width: 500px;
			height: 500px;
			background-color: red;
			
		}
		image.baseline{
			vertical-align: baseline;
		}
		img.top{
			vertical-align: top;
		}
		img.middle{
			vertical-align: middle;
		}
		img.bottom{
			vertical-align: bottom;
		}
	</style>
	<body>
		<!-- 需求结构：4个p，嵌套文字 图片叫什么名字
		                    文字后加img，设定宽高：25~100px 
							每个图片后面加基线对齐，顶部对齐
							居中对齐，底部对齐
							-->
		<h1>文本与图片垂直属性</h1>
		<p>哪吒1<img class="baseline" src="img/哪吒1.png" alt="哪吒1" width="100px" height="100px">基线对齐</p>
		<p>哪吒2 <img class="top" src="img/哪吒2.png" alt="哪吒2" width="100px" height="100px">顶部对齐</p>
		<p>哪吒3 <img class="middle" src="img/哪吒3.png" alt="哪吒3" width="100px" height="100px">居中对齐</p>
		<p>哪吒2 <img  class="bottom" src="img/哪吒4.png" alt="哪吒4" width="100px" height="100px">底部对齐</p>	
		<!-- css选择去--抓第一张照片...
		 思路：派生选择器：找后代+伪类选择器：添加效果
		 p img：nth-child（1）
		 -->
	</body>
</html>